<template>
  <div data-v-postdetail ref="postdetail" class="postdetail" @scroll="onscroll">
    <!-- <div class="postdetail-top"><NewTopNav></NewTopNav></div> -->
    <div class="postdetail-body">
      <div class="postdetail-cover">
        <img :src="post.cover" alt="" />
      </div>

      <div class="postdetail-title">
        <h2>{{ post.title }}</h2>
        <span>{{ post.upload_date }}</span>
      </div>

      <div class="postdetail-user">
        <img :src="post.user_pic" alt="" />
        <div class="postdetail-info">
          <div class="userinfo">
            <h2>{{ post.username }}</h2>
            <span>{{ post.user_desc }}</span>
          </div>
          <div class="postdetail-info-btn">
            <el-button class="btn" type="primary">关注</el-button>
          </div>
        </div>
      </div>

      <div class="postdetail-content markdown-body" v-html="post.content"></div>

      <!-- 评论区 -->
      <div class="comment">
        <el-divider content-position="left">全部评论</el-divider>
        <!-- 顶部回复输入框 -->
        <div class="comment-input">
          <div class="input-left">
            <img :src="userinfo.user_pic" alt="" />
          </div>

          <div class="input-right">
            <el-input
              class="send-input"
              type="textarea"
              placeholder="请输入内容"
              v-model="parentReplyContent.textarea"
              resize="none"
            >
            </el-input>

            <span @click="sendComment(parentReplyContent)">发送</span>
          </div>
        </div>

        <div class="comment-list">
          <section
            v-for="item in commentList"
            :key="item.id"
            class="comment-item"
          >
            <div class="comment-item-left">
              <img :src="item.user_pic" alt="" />
            </div>

            <div class="comment-item-right">
              <div class="comment-item-right-top">
                <span>{{ item.username }}</span>
              </div>
              <div class="comment-item-right-content">
                <p style="white-space: pre-line">{{ item.comment }}</p>
              </div>
              <div class="comment-item-right-bottom">
                <i class="iconfont">{{ item.comment_date }}</i>
                <i class="iconfont icon-pinglun" @click="getSendInput(item)"
                  >回复</i
                >
              </div>

              <ul class="children-comment">
                <li
                  v-for="childrenItem in item.children"
                  :key="childrenItem.id"
                  class="children-comment-list"
                >
                  <div class="children-comment-list-left">
                    <img :src="childrenItem.user_pic" alt="" />
                  </div>
                  <div class="children-comment-list-right">
                    <div class="children-comment-list-right-top">
                      <span>{{ childrenItem.username }}</span>
                      <span>@{{ childrenItem.reply_username }}:</span>
                    </div>
                    <div class="children-comment-list-right-content">
                      <p style="white-space: pre-line">
                        {{ childrenItem.comment }}
                      </p>
                    </div>
                    <div class="children-comment-list-right-bottom">
                      <i class="iconfont">{{ childrenItem.comment_date }}</i>
                      <i class="iconfont" @click="getSendInput(childrenItem)"
                        >回复</i
                      >
                    </div>
                  </div>
                </li>
              </ul>

              <div
                :ref="'input' + item.id"
                :id="'input' + item.id"
                class="comment-input children-comment-input"
                style="display: none"
              >
                <div class="input-left">
                  <img :src="userinfo.user_pic" alt="" />
                </div>

                <div class="input-right">
                  <el-input
                    class="send-input"
                    type="textarea"
                    :placeholder="placeholderValue"
                    v-model="childrenReplyContent.textarea"
                    resize="none"
                  >
                  </el-input>

                  <span @click="sendComment(childrenReplyContent)">发送</span>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <div v-show="postScrollTop" class="fixed-menu">
      <span class="iconfont icon-good-fill"></span>
      <span class="iconfont icon-collection-fill"></span>
    </div>
    <el-backtop
      style="right: 10%; bottom: 30px"
      class="post-backtop"
      target=".postdetail"
      :visibility-height="500"
    >
    </el-backtop>
  </div>
</template>

<script>
import NewTopNav from "@/components/NewTopNav";
import debounce from "@/debounce.js";

export default {
  name: "PostDetail",
  data: function () {
    return {
      post: {},

      userinfo: {},
      commentList: [],

      // 发送内容
      placeholderValue: "请输入内容",

      childrenReplyContent: {
        textarea: "",
        parentId: -1,
        replyUser: -1,
      },

      parentReplyContent: {
        textarea: "",
        parentId: -1,
        replyUser: -1,
      },

      postScrollTop: "",
    };
  },
  components: {
    NewTopNav,
  },

  created() {
    this.getPost();

    // console.log(this.$route.params);
    this.$getuserinfo((data) => {
      // console.log(data);
      this.userinfo = data;
    });
  },

  methods: {
    getPost() {
      this.axios
        .get(`getpost/${this.$route.params.id}`)
        .then((response) => {
          if (response.data.status == 200) {
            this.post = response.data.data;
            // console.log(response);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    onscroll: debounce(function () {
      if (this.$refs.postdetail.scrollTop > 200) {
        this.postScrollTop = true;
      } else {
        this.postScrollTop = false;
      }
    }, 100),
  },
};
</script>

<style lang="scss" scoped>
.postdetail[data-v-postdetail] {
  width: 100%;
  height: 100%;
  background-color: #f6f7f9;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }

  .postdetail-top {
    width: 100%;
    height: 65px;
    background-color: #fff;
  }

  .postdetail-body {
    width: 100%;

    .postdetail-cover {
      position: relative;
      width: 100%;
      height: 600px;

      img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .postdetail-title {
      position: relative;
      width: 68%;
      height: 120px;
      margin: 0 auto;
      padding: 0 44px;
      background-color: #fff;
      border-bottom: 1px solid #eee;

      box-shadow: 0 0 6px rgb(0 0 0 / 12%);

      h2 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        font-size: 28px;
        font-weight: 700;
        text-align: center;
        color: #333;
      }

      span {
        position: absolute;
        left: 44px;
        bottom: 10px;
        font-size: 16px;
        color: #666;
      }
    }

    .postdetail-user {
      display: flex;
      align-items: center;
      width: 68%;
      height: 100px;
      margin: 0 auto;
      padding: 0 44px;
      background-color: #fff;
      border-bottom: 1px solid #eee;

      box-shadow: 0 0 6px rgb(0 0 0 / 12%);

      img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        border-radius: 50%;
        cursor: pointer;
      }
      .postdetail-info {
        display: flex;
        justify-content: space-between;
        flex: 1;
        height: 80px;

        .userinfo {
          flex: 1;
          padding: 10px 0;

          h2 {
            font-size: 18px;
          }
          span {
            display: inline-block;
            width: 600px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .postdetail-info-btn {
          display: flex;
          .btn {
            width: 80px;
            height: 40px;
            margin: auto;
          }
        }
      }
    }

    .postdetail-content {
      width: 68%;
      margin: 0 auto;
      padding: 16px 44px;
      background-color: #fff;

      box-shadow: 0 0 6px rgb(0 0 0 / 12%);
      //   border-bottom: 1px solid #eee;
    }

    .comment {
      width: 68%;
      margin: 0 auto;
      padding: 10px 0;
      background-color: #fff;

      box-shadow: 0 0 6px rgb(0 0 0 / 12%);

      .comment-input {
        display: flex;
        justify-content: space-around;
        width: 100%;
        padding: 5px 0;

        .input-left {
          width: 50px;
          height: 50px;

          img {
            display: inline-block;
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 50%;
          }
        }

        .input-right {
          display: flex;
          width: 92%;
          // padding-bottom: 60px;
          // border-bottom: 1px solid #dcdfe6;

          .send-input {
            width: 955px;
          }

          span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            margin-left: 8px;
            color: #fff;
            background-color: #6768ab;
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.5s;
          }

          span:hover {
            opacity: 0.9;
          }
        }
      }

      .comment-list {
        width: 100%;
        min-height: 200px;
        padding: 20px 0;

        .comment-item {
          display: flex;
          justify-content: space-around;
          width: 100%;
          padding: 10px 0;

          .comment-item-left {
            img {
              display: inline-block;
              width: 50px;
              height: 50px;
              object-fit: cover;
              border-radius: 50%;
            }
          }

          .comment-item-right {
            width: 92%;
            padding-bottom: 15px;
            border-bottom: 1px solid #dcdfe6;

            .comment-item-right-top {
              span:nth-child(1) {
                font-size: 16px;
                color: rgb(251, 114, 153);
                padding-right: 10px;
              }

              span:nth-child(2) {
                font-size: 15px;
                color: #757575;
              }
            }

            .comment-item-right-content {
              padding: 10px 0;
            }

            .comment-item-right-bottom {
              i {
                font-size: 15px;
                color: #757575;
                cursor: pointer;
              }

              i:nth-child(1) {
                padding-right: 20px;
              }

              i::before {
                margin-right: 5px;
              }
            }

            .children-comment {
              width: 100%;

              .children-comment-list {
                display: flex;
                justify-content: space-around;
                width: 100%;
                padding: 10px 0;

                .children-comment-list-left {
                  img {
                    display: inline-block;
                    width: 40px;
                    height: 40px;
                    object-fit: cover;
                    border-radius: 50%;
                  }
                }

                .children-comment-list-right {
                  width: 93%;
                  // padding-bottom: 15px;
                  // border-bottom: 1px solid #dcdfe6;

                  .children-comment-list-right-top {
                    span:nth-child(1) {
                      font-size: 16px;
                      color: rgb(251, 114, 153);
                      padding-right: 6px;
                    }

                    span:nth-child(2) {
                      font-size: 14px;
                      color: #00a1d6;
                    }
                  }

                  .children-comment-list-right-content {
                    padding: 10px 0;
                    font-size: 16px;

                    p {
                      i {
                        margin-right: 5px;
                        font-style: normal;
                        color: #00a1d6;
                      }
                    }
                  }

                  .children-comment-list-right-bottom {
                    i {
                      font-size: 13px;
                      color: #757575;
                      cursor: pointer;
                    }

                    i:nth-child(1) {
                      padding-right: 20px;
                    }

                    i::before {
                      margin-right: 5px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .fixed-menu {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    right: 10%;
    bottom: 100px;
    width: 60px;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 0 6px rgb(0 0 0 / 12%);

    span {
      margin: 10px auto;
      font-size: 36px;
      color: #666;
      cursor: pointer;

      &:hover {
        color: #00a1d6;
      }
    }
  }

  .post-backtop {
    width: 60px;
    height: 60px;
    color: #666;
    border-radius: 0;
  }
}
</style>